import VueRouter from "vue-router";
import About from "../pages/About"
import Home from "../pages/Home"
import News from "../pages/News"
import Message from "../pages/Message"
import Detail from "../pages/Detail"
const vr= new VueRouter({
    mode:"history",
    routes:[
        {
            path:"/about",
            component:About,
            meta:{
                title:"关于"
            }
        }, 
        {
            path:"/home",
            component:Home,
            children:[
                {
                    path:"news",
                    component:News,
                    meta:{
                        isAuth:true,
                        title:"新闻"
                    },
                    //
                    beforeEnter(to,from,next ){
                        if (to.meta.isAuth) {
                            if(localStorage.getItem("school") === '清华'){
                                next()
                            }else{
                                alert("只有清华大学才可以看");
                            }
                        }else{
                            next()
                        }
                    }
                },
                {
                    path:"message",
                    component:Message,
                    children:[
                        {
                            name:"detail",
                            // path:"detail/:id/:title",
                            path:"detail",
                            component:Detail,

                            //第一种写法  对象传递
                            // props:{a:1,b:2}
                            //第二种写法  当为true时,会把param的参数以props形式传递过去
                            // props:true

                            //第三种 函数
                            props($route){
                                // return {
                                //     id:$route.params.id,
                                //     title:$route.params.title
                                // }
                                return {
                                    id:$route.query.id,
                                    title:$route.query.title
                                }
                            }
                        }
                    ],
                    meta:{
                        isAuth:true,
                        title:"消息"
                    }
                }
            ],
            meta:{
                title:"主页",
            }

        },
    ]
})

// //前置全局守卫
// vr.beforeEach((to,from,next )=>{
//     if (to.meta.isAuth) {
//         if(localStorage.getItem("school") === '清华'){
//             next()
//         }else{
//             alert("只有清华大学才可以看");
//         }
//     }else{
//         next()
//     }
// });

//后置全局守卫
vr.afterEach((to,from)=>{
    document.title=to.meta.title || "清华系统"
})
export default vr




// 1.对于一个url来说，什么是hash值? #及其后面的内容就是hash值
//     2.hash值不会包含在 HTTP 请求中，即: hash值不会带给服务器3.hash模式:
//     1.地址中永远带着#号，不美观。
// 2.若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法.
// 3.兼容性较好
// 4.history模式:
//     1..地址干净，美观
//     2.兼容性和hash模式相比略差
//     3.应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题